<template>
    <div class="courseList">
        <div>
            <Button type="primary" @click="addCourseBtn"> +</Button>
        </div>
        <div class="list">
            <Table :columns="courseListData"
                   :data="courseList"
                   :show-header=true
                   draggable
                   size="small"
                   @on-drag-drop="dragOrder">

                <!--课时名称-->
                <template slot-scope="{ row, index }" slot="courseName">
                    <div class="name" @click="goDetails(row, index)">{{row.courseName}}</div>
                </template>

                <!--时长-->
                <template slot-scope="{ row, index }" slot="time">
                    <span>{{row.courseTime}}</span>
                </template>

                <!--浏览-->
                <template slot-scope="{ row, index }" slot="view">
                    <span>{{row.courseView}}</span>
                </template>

                <!--评分-->
                <template slot-scope="{ row, index }" slot="score">
                    <span>{{row.courseScore}}</span>
                </template>

                <!--VIP-->
                <template slot-scope="{ row, index }" slot="vip">
                    <span>{{row.vip}}</span>
                </template>

                <!--状态-->
                <template slot-scope="{ row, index }" slot="status">
                    <i-switch v-model="row.status"
                              :true-value="1"
                              :false-value="0"
                              false-color="#ff4949"
                              @on-change="changeStatus(row)">
                        <span slot="open"></span>
                        <span slot="close" style="font-size: 14px"></span>
                    </i-switch>
                </template>

                <!--详情-->
                <template slot-scope="{ row, index }" slot="details">
                    <Button size="small" type="success" @click="goDetails(row, index)">详情</Button>
                </template>

                <!--操作-->
                <template slot-scope="{ row, index }" slot="handle">
                    <Button size="small" type="info" @click="edit(row, index)">编辑</Button>
                </template>

                <!--排序-->
                <template slot-scope="{ row, index }" slot="order">
                    <Button size="small" type="warning" @click="order(row, index)">排序</Button>
                </template>

                <!--删除-->
                <template slot-scope="{ row, index }" slot="del">
                    <Button size="small" type="error" @click="del(row, index)">删除</Button>
                </template>
            </Table>
        </div>

        <!--添加课程-->
        <Modal v-model="addCourseFlag"
               draggable
               :loading="true"
               width="1180"
               @on-ok="okAddCourse">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">添加课时</span>
            </p>

            <Form :model="courseInfo" :label-width="100">
                <!--课程名称-->
                <FormItem label="课程名称" style="margin-top: 10px">
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p>课程名称</p>
                            <p style="color: #F00">50个字符以内</p>
                        </div>
                        <Input prefix="ios-card-outline"
                               v-model="courseInfo.courseName"
                               maxlength="50"
                               show-word-limit
                               placeholder="课程名称"
                               style="width: 1000px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程视频URL地址-->
                <FormItem label="视频URL" style="margin-top: 20px">
                    <Tooltip content="课程视频URL地址" placement="right" theme="light">
                        <Input prefix="logo-youtube"
                               v-model="courseInfo.courseUrl"
                               maxlength="200"
                               show-word-limit
                               placeholder="课程视频URL地址"
                               style="width: 1000px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程视频-->
                <FormItem label="视频预览" style="margin-top: 20px" v-if="courseInfo.courseUrl!=''">
                    <video width="300"
                           height="144"
                           controls
                           preload>
                        <source :src="courseInfo.courseUrl" type="video/mp4">
                    </video>
                </FormItem>

                <!--课程时长-->
                <FormItem label="课程时长" prop="courseTime">
                    <TimePicker :value="courseInfo.courseTime"
                                v-model="courseInfo.courseTime"
                                placeholder="课程时长"
                                style="width: 168px"></TimePicker>
                </FormItem>

                <!--会员类型-->
                <FormItem label="会员类型" prop="vip">
                    <RadioGroup v-model="courseInfo.vip">
                        <Radio :label="1">会员</Radio>
                        <Radio :label="0">非会员</Radio>
                    </RadioGroup>
                </FormItem>

                <!--课程状态-->
                <FormItem label="课程状态" style="margin-top: 20px">
                    <i-switch v-model="courseInfo.status"
                              size="large"
                              :true-value="1"
                              :false-value="0"
                              false-color="#ff4949">
                        <span slot="open">ON</span>
                        <span slot="close" style="font-size: 14px">OFF</span>
                    </i-switch>
                </FormItem>

                <!--课程评分-->
                <FormItem label="课程评分">
                    <Tooltip content="0 - 5分" placement="right" theme="light">
                        <InputNumber
                                v-model="courseInfo.courseScore"
                                placeholder="课程评分"
                                style="width: 100px"
                                :max="5"
                                :min="0"
                                :step="0.1"
                                clearable></InputNumber>
                    </Tooltip>
                </FormItem>

            </Form>
        </Modal>

        <!--编辑课程-->
        <Modal v-model="updateCourseFlag"
               draggable
               :loading="true"
               width="1180"
               @on-ok="okUpdateCourse">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">更新课时</span>
            </p>

            <Form :model="courseInfo" :label-width="100">
                <!--课程名称-->
                <FormItem label="课程名称" style="margin-top: 10px">
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p>课程名称</p>
                            <p style="color: #F00">50个字符以内</p>
                        </div>
                        <Input prefix="ios-card-outline"
                               v-model="courseInfo.courseName"
                               maxlength="50"
                               show-word-limit
                               placeholder="课程名称"
                               style="width: 1000px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程视频URL地址-->
                <FormItem label="视频URL" style="margin-top: 20px">
                    <Tooltip content="课程视频URL地址" placement="right" theme="light">
                        <Input prefix="logo-youtube"
                               v-model="courseInfo.courseUrl"
                               maxlength="200"
                               show-word-limit
                               placeholder="课程视频URL地址"
                               style="width: 1000px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程视频-->
                <FormItem label="视频预览" style="margin-top: 20px" v-if="courseInfo.courseUrl!=''">
                    <video width="300"
                           height="144"
                           controls
                           preload>
                        <source :src="courseInfo.courseUrl" type="video/mp4">
                    </video>
                </FormItem>

                <!--课程时长-->
                <FormItem label="课程时长" prop="courseTime">
                    <TimePicker :value="courseInfo.courseTime"
                                v-model="courseInfo.courseTime"
                                placeholder="课程时长"
                                style="width: 168px"></TimePicker>
                </FormItem>

                <!--会员类型-->
                <FormItem label="会员类型" prop="vip">
                    <RadioGroup v-model="courseInfo.vip">
                        <Radio :label="1">会员</Radio>
                        <Radio :label="0">非会员</Radio>
                    </RadioGroup>
                </FormItem>

                <!--课程状态-->
                <FormItem label="课程状态" style="margin-top: 20px">
                    <i-switch v-model="courseInfo.status"
                              size="large"
                              :true-value="1"
                              :false-value="0"
                              false-color="#ff4949">
                        <span slot="open">ON</span>
                        <span slot="close" style="font-size: 14px">OFF</span>
                    </i-switch>
                </FormItem>

                <!--课程评分-->
                <FormItem label="课程评分">
                    <Tooltip content="0 - 5分" placement="right" theme="light">
                        <InputNumber
                                v-model="courseInfo.courseScore"
                                placeholder="课程评分"
                                style="width: 100px"
                                :max="5"
                                :min="0"
                                :step="0.1"
                                clearable></InputNumber>
                    </Tooltip>
                </FormItem>

            </Form>
        </Modal>

        <!--修改课程状态-->
        <Modal v-model="statusFlag"
               draggable
               :loading="true"
               @on-ok="okStatus">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">课程状态</span>
            </p>

            <p>
                确定
                上线
                下线
                <span style="color: #FF0000;font-size: 16px">《{{courseInfo.courseName}}》</span>
                的课程吗?
            </p>
        </Modal>

        <!--删除询问-->
        <Modal v-model="delFlag"
               draggable
               :loading="true"
               @on-ok="okDel">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">删除课程</span>
            </p>

            <p>
                确定删除
                <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">{{courseInfo.courseName}}</span>
                的课程吗?
            </p>
            <span style="color: #FF0000;font-size: 14px">【慎重删除，删除无法找回】</span>
        </Modal>

        <!--排序面板-->
        <Modal v-model="orderFlag"
               draggable
               width="700"
               @on-ok="okCourseOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">用户排序</span>
            </p>

            将该课程
            <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">{{courseInfo.courseName}} </span>
            放置序号为
            <InputNumber :max="courseList.length"
                         :min="1"
                         style="width: 100px;margin: 0px 8px"
                         v-model="tmpIndex"></InputNumber>
            的课程前
        </Modal>
    </div>
</template>

<script>
    import expandCourse from "@/components/course/ExpandCourse"

    export default {
        name: "",
        props: {
            //课程id
            subjectId: {},
            //章节id
            chapterId: {},
            // 章节列表
            courses: {},
        },
        components: {
            expandCourse
        },
        data() {
            return {
                courseList: this.courses,
                courseListData: [
                    {
                        title: "", align: "center", width: 40, type: 'expand', render: (h, params) => {
                            return h(expandCourse, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {title: "序号", type: 'index', resizable: true, align: "center", width: 80},
                    {title: "课时名称", slot: 'courseName', key: 'courseName', resizable: true, align: "left"},

                    {title: "时长", slot: 'time', key: 'time', resizable: true, align: "center", width: 100},
                    {title: "浏览", slot: 'view', key: 'view', resizable: true, align: "center", width: 100},
                    {title: "评分", slot: 'score', key: 'score', resizable: true, align: "center", width: 80},
                    {title: "VIP", slot: 'vip', resizable: true, align: "center", width: 80},
                    {title: "状态", slot: 'status', resizable: true, align: "center", width: 80},

                    {title: "详情", slot: 'details', resizable: true, align: "center", width: 80},
                    {title: "编辑", slot: 'handle', resizable: true, align: "center", width: 80},
                    {title: "排序", slot: 'order', resizable: true, align: "center", width: 80},
                    {title: "删除", slot: 'del', resizable: true, align: "center", width: 80}],
                //课程信息
                courseInfo: {
                    //id
                    courseId: "",
                    //所属科目
                    subjectId: "",
                    //章节id
                    chapterId: "",
                    //课程名称
                    courseName: "",
                    //课程视频URL地址
                    courseUrl: "",
                    //课程时长
                    courseTime: "00:00:00",
                    //课程观看人次
                    courseView: "",
                    //课程大小
                    courseSize: "",
                    //课程平均得分，默认5分  0-5
                    courseScore: 5.0,
                    //是否vip 默认0 非会员
                    vip: 0,
                    //排序顺序
                    showOrder: "",
                    //1在用  0失效
                    status: 0,
                    createUser: this.$store.getters.getId
                },
                index: "",
                //添加课程
                addCourseFlag: false,
                //编辑课程
                updateCourseFlag: false,
                //状态flag
                statusFlag: false,
                //删除询问
                delFlag: false,
                //排序
                orderFlag: false,
                //临时放置索引
                tmpIndex: 1
            }
        },
        methods: {
            //根据章节id查询课程
            selectCourseListByChapterId: function () {
                this.axios.get(`/course/course/courseList/${this.chapterId}`)
                    .then((data) => {
                        this.courseList = data.data
                    })
            },
            //添加课程按钮
            addCourseBtn: function () {
                this.courseInfo.courseName = ""
                this.courseInfo.courseUrl = ""
                this.courseInfo.courseTime = "00:00:00"
                this.courseInfo.courseScore = 5.0
                this.courseInfo.vip = 0
                this.courseInfo.status = 0
                this.addCourseFlag = true
            },
            //添加课程
            okAddCourse: function () {
                let data = {
                    subjectId: this.subjectId,
                    chapterId: this.chapterId,
                    courseName: this.courseInfo.courseName,
                    courseUrl: this.courseInfo.courseUrl,
                    courseTime: this.courseInfo.courseTime,
                    courseScore: this.courseInfo.courseScore,
                    vip: this.courseInfo.vip,
                    status: this.courseInfo.status,
                    createUser: this.$store.getters.getId
                }
                this.axios.post(`/course/course/course`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程添加成功'
                            });
                            this.addCourseFlag = false
                            this.selectCourseListByChapterId()
                        }
                    })
            },
            //去详情页面
            goDetails: function (row, index) {
                let {href} = this.$router.resolve({
                    name: "CourseDetails",
                    query: {
                        cid: row.courseId
                    }
                });
                window.open(href, '_blank');
            },
            //编辑课程
            edit: function (row, index) {
                this.updateCourseFlag = true
                this.courseInfo = row
                this.index = index
            },
            //确定更新
            okUpdateCourse: function () {
                let data = {
                    subjectId: this.subjectId,
                    chapterId: this.chapterId,
                    courseName: this.courseInfo.courseName,
                    courseUrl: this.courseInfo.courseUrl,
                    courseTime: this.courseInfo.courseTime,
                    courseScore: this.courseInfo.courseScore,
                    vip: this.courseInfo.vip,
                    status: this.courseInfo.status,
                    updateUser: this.$store.getters.getId
                }
                this.axios.put(`/course/course/course/${this.courseInfo.courseId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程更新成功'
                            });
                            this.updateCourseFlag = false
                            this.selectCourseListByChapterId()
                        }
                    })
            },
            //修改状态
            changeStatus: function (row) {
                // this.statusFlag=true
                this.courseInfo = row
                let data = {
                    courseId: row.courseId,
                    status: row.status
                }
                this.axios.put(`/course/course/course/${row.courseId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '状态修改成功'
                            });
                            this.statusFlag = false
                        }
                    })
            },
            okStatus: function () {
                let data = {
                    courseId: row.courseId,
                    status: row.status
                }
                this.axios.put(`/course/course/course/${row.courseId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '状态修改成功'
                            });
                            this.statusFlag = false
                        }
                    })
            },
            //点击删除按钮
            del: function (row, index) {
                this.delFlag = true
                this.courseInfo = row
                this.index = index
            },
            //确定删除
            okDel: function () {
                this.axios.delete(`/course/course/course/${this.courseInfo.courseId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程删除删除成功'
                            });
                            this.delFlag = false
                            this.selectCourseListByChapterId()
                        }
                    })
            },
            //点击排序按钮
            order: function (row, index) {
                this.orderFlag = true
                this.courseInfo = row
                this.index = index
            },
            //确定排序
            okCourseOrder: function () {
                let number = this.tmpIndex - this.index;
                if (number == 1 || number == 2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                    return
                }
                if (this.tmpIndex > this.index) {
                    this.tmpIndex--
                }
                let tmpUserList = this.courseList;
                tmpUserList.delete(this.index)
                tmpUserList.insert(this.tmpIndex, this.courseInfo)

                let ids = []
                for (let i = 0; i < this.courseList.length; i++) {
                    ids.push(this.courseList[i].courseId)
                }
                this.axios.put(`/course/course/order`, ids)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程排序成功'
                            });
                        }
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                this.courseInfo = this.courseList[fromIndex];
                this.index = fromIndex;
                this.tmpIndex = toIndex + 1;
                this.okCourseOrder()
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>
    /*.courseList {
        margin: -16px;
        background-color: #ffead4;
    }

    .courseList .list {
        padding: 16px;
    }*/

    .courseList .name {
        margin: 0px -18px;
        padding: 2px 0px 2px 18px;
    }
</style>